import React, { Component } from 'react'

export default class SetStateDemo extends Component {
  state = {
    count: 0
  }
  add = () => {
    // 第一种写法 对象 语法糖
    // const {count} = this.state
    // this.setState({count: count+1})
    // // 第一种写法 + callback
    // this.setState({count: count+1}, () => {
    //   // 获取的是状态和页面更新后的state
    //   console.log('回调',this.state.count);
    // })
    // // 因为setState是异步的更新 所以获取的是更新前的state
    // console.log('非回调',this.state.count);

    // 第二种写法 函数
    this.setState((state, props) => {
      console.log(state, props)
      return {count:state.count+1}
    })

  }
  render() {
    return (
      <div>
        <h1>当前求和为{this.state.count}</h1>
        <button onClick={this.add}>点击+1</button>
      </div>
    )
  }
}
